<template>
<!--  <el-dialog v-model="dialogTableVisible" title="修改用户信息">-->
    <nav-bar-func :has-edit="false" title="修改用户信息"/>
    <el-form :model="form" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-date-picker
              v-model="form.age"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.conInfo"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-checkbox-group v-model="form.permission">
          <el-checkbox label="超级管理员" name="type" model-value="1"></el-checkbox>
          <el-checkbox label="管理员" name="type"></el-checkbox>
          <el-checkbox label="普通用户" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
<!--  </el-dialog>-->
</template>

<script lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

import NavBarFunc from "@/components/navbar/NavBarFunc.vue"
import { PUT } from "@/api";

export default {
  name: "EditUser",
  components: {
    NavBarFunc
  },
  props: {
    userInfo: {
      type: Object,
      default: {}
    },
    dialogTableVisible: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const route = useRoute()
    const store = useStore()
    // const dialogTableVisible = ref(true)
    const form = reactive({
      username: '',
      age: '',
      gender: '',
      phone: '',
      email: '',
      address: '',
      conInfo: '',
      permission: [],
    })

    onBeforeMount(() => {
      const user = store.state.modUser
      console.log(store.state.modUser);
      if (user != null) {
        form.username = user.username
        form.age = user.age
        form.gender = user.gender == '男' ? '1' : '0'
        form.phone = user.phone
        form.email = user.email
        form.address = user.email
        form.conInfo = user.conInfo
        if (user.roleList != null) {
          form.permission = user.roleList.split("、");
        }

      }
    })

    const onSubmit = () => {
      console.log('submit!')
      console.log(form)
      form.age = new Date(form.age).toLocaleDateString()
      // TODO 用户封装传来数据失败
      PUT("/user/update", {
        ...form
      }, {}).then(res => {
        console.log(res)
      }).catch(err => {
      console.log(err)})
    }
    const onCancel = () => {
    }

    return {
      form,
      onSubmit,
      onCancel,
      // dialogTableVisible
    }
  },
}
</script>

<style scoped lang="scss">
</style>
